<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<style type="text/css">
			canvas{border: 1px solid #333;}
		</style>
	</head>
	<body>
		<canvas width="600" height="400"></canvas>
	</body>
	<script type="text/javascript">
		let canvas=document.querySelector("canvas");
		let ctx=canvas.getContext("2d");
		
		//移动坐标系，坐标原点位于canvas中心
		ctx.translate(300,200)
		
		//绘制大圆
		ctx.beginPath()
		ctx.arc(0,0,200,0,Math.PI*2,false)
		ctx.stroke()
		
		//向上绘制一条竖线
		ctx.beginPath()
		ctx.moveTo(0,0)
		ctx.lineTo(0,-200)
		ctx.stroke()
		
		//旋转坐标系120度，绘制一条线
		ctx.save()
		ctx.rotate(120*Math.PI/180)
			ctx.moveTo(0,0)
			ctx.lineTo(0,-200)
			ctx.stroke()
		ctx.restore()
		
		//旋转坐标系240度，绘制一条线
		ctx.save()
		ctx.rotate(240*Math.PI/180)
			ctx.moveTo(0,0)
			ctx.lineTo(0,-200)
			ctx.stroke()
			
		ctx.restore()
		
	</script>
</html>